<template>
  <div>
    <el-card style="position: relative">
      <div class="title">登录时长设置</div>
      <el-button type="primary" class="btn">保存</el-button>
      <el-form :model="formData" label-width="170px">
        <el-form-item label="是否控制登录时长：">
          <el-radio-group v-model="formData.loginTime">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="text">开启登录时长控制，用于在登录时长有效期内</div>
        <el-form-item label="限制时长：" v-if="formData.loginTime === '1'">
          <el-input
            v-model="formData.loginTimeLong"
            style="width: 80px; margin-right: 10px"
          />小时
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";

const formData = reactive({
  loginTime: "1",
  loginTimeLong: ""
});
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  line-height: 28px;
  margin-bottom: 20px;
}

.text {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  margin-left: 45px;
  margin-top: -15px;
  margin-bottom: 20px;
}

.btn {
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
